<template>
	<view class="container">
		<view class="shopCon" v-if="prescription1.length>0">
			<view class="tips c-danger">
				此类药品为非处方药，您可点击“下单”直接购买。
			</view>
			<view class="shopItem" v-for="(items,index) in prescription1" :key="index">
				<view class="shopItemTop">
					<view class="f28 c333" style="width: 80%;">{{items.productName}} </view>
					<view class="f28 b  price-text">
						<view class="">
							¥{{items.salePrice}}
						</view>
						<view class="" style="text-align: right;color: #999;font-size: 30rpx;">
							x{{items.quantity}}
						</view>
					</view>
				</view>
				<view class="f28 c999">


				</view>
			</view>
			<view class="btn flex_c_end">
				<view class="payBtn f26 flex_c_m" @click="onCancel()">去下单
				</view>
			</view>

		</view>

		<view class="shopCon" v-if="prescription2.length>0">


			<view class="tips c-danger">
				此类药品为处方药，请您点击“上传处方”，或点击“去问诊”，方可完成购药。
			</view>
			<view class="shopItem" v-for="(items,index) in prescription2" :key="index">
				<view class="shopItemTop">
					<view class="f28 c333" style="width:80%;">{{items.productName}} </view>
					<view class="f28 b  price-text">
						<view class="">
							¥{{items.salePrice}}
						</view>
						<view class="" style="text-align: right;color: #999;font-size: 30rpx;">
							x{{items.quantity}}
						</view>
					</view>
				</view>

			</view>
			<view class="btn flex_c_end">
				<view class="payBtn f26 flex_c_m" @click="consultation()">去问诊
				</view>
				<view class="payBtn f26 flex_c_m" @click="uploadPrescription()">上传处方
				</view>
			</view>
		</view>

		<view class="shopCon" v-if="prescription3.length>0">
			<view class="tips c-danger">
				此类药品，需要线下医疗机构开具的处方才能购买。请上传历史就诊记录，如有处方请务必上传处方。
			</view>
			<view class="shopItem" v-for="(items,index) in prescription3" :key="index">
				<view class="shopItemTop">
					<view class="f28 c333" style="width: 80%;">{{items.productName}} </view>
					<view class="f28 b  price-text">
						<view class="">
							¥{{items.salePrice}}
						</view>
						<view class="" style="text-align: right;color: #999;font-size: 30rpx;">
							x{{items.quantity}}
						</view>
					</view>
				</view>

			</view>

			<view class="btn flex_c_end">
				<view style="width: 250rpx;" class="payBtn f26 flex_c_m" @click="uploadRecords">上传就诊记录和处方
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLaunch,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		qzApi
	} from '@/config/request.js';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

	export default {
		data() {
			return {
				currentIndex: 0,
				queryForm: {
					orderStatus: null,
					pageNo: 1,
				},
				orderItemVos: [],
				orderQueryForm: {
					orderId: 0,
					tokenKey: uni.getStorageSync('tokenKey'),
					userAccounts: uni.getStorageSync('userAccounts'),
				},
				prescription1: [],
				prescription2: [],
				prescription3: [],
				orderId: ""

			}
		},
		onLoad(e) {
			this.getOrderList(e.id)
			this.orderId = e.id
		},
		onShow() {
			let data = uni.getStorageSync("describe");
			if(data==1){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		methods: {

			// 去下单
			async onCancel() {
				console.log(this.orderId)
				let data = await qzApi.confirmOtc(this.orderId);
				if (data.code == 0) {
					uni.navigateTo({
						url: "/page1/order/index?id=" + this.orderId + '&type=1'
					})
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none",
						duration: 2000
					})
				}

			},
			async getOrderList(id) {
				try {
					let form = {
						orderId: id,
						tokenKey: this.orderQueryForm.tokenKey,
						userAccounts: this.orderQueryForm.userAccounts
					}
					const order = await qzApi.getOrderDetail(form)

					let list = [];
					console.log(order.data.orderItemVos)
					order.data.orderItemVos.forEach((item, index) => {
						console.log(item.rxType)
						if (item.rxType != 0 && item.rxType == "无需处方") {
							this.prescription1.push(item)
						}
						if (item.rxType != 0 && item.rxType == "支持线上处方") {
							this.prescription2.push(item)
						}
						if (item.rxType != 0 && item.rxType == "强制纸质处方") {
							this.prescription3.push(item)
						}
					})

				} catch (error) {

				}
			},

			// 去问诊
			consultation() {
				if (this.orderId) {
					uni.setStorageSync("describe", 1)
					uni.navigateTo({
						url: "/page1/consultationInfo/consultationInfo?orderId=" + this.orderId
					})
				} else {
					uni.showToast({
						title: 'orderId为空',
						icon: 'none'
					})
				}
			},
			// 上传处方
			uploadPrescription() {
				uni.setStorageSync("describe", 1)
				uni.navigateTo({
					url: '/page1/upload/index?id=' + this.orderId + '&itemList=' + JSON
						.stringify(this.prescription2) + '&type=12'
				})
			},
			// 上传处方
			uploadRecords() {
				uni.setStorageSync("describe", 1)
				uni.navigateTo({
					url: '/page1/upload/index?id=' + this.orderId + '&itemList=' + JSON
						.stringify(this.prescription3) + '&type=40'
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F8F8F8;
		padding: 20rpx;
	}

	.fixed-nav {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 10;
		background: #fff;
	}

	.nav-class {
		display: flex;
	}

	.nav-title {
		padding: 0 30rpx;
		flex: none;
		font-size: 28rpx;
		line-height: 88rpx;
		position: relative;
	}

	.nav-title.active::after {
		position: absolute;
		content: '';
		width: 80rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background: #ee0a24;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.item {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		margin-top: 20rpx;
	}

	.item:last-child {
		margin-bottom: 0rpx;
	}

	.shopItem_img image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		border: 1rpx solid #eeeeee;
	}

	.orderContent_goods {
		height: 80rpx;
	}

	.prompt {
		padding-top: 8rpx;
		padding-bottom: 20rpx;
		text-align: right;
		color: #f06454;
	}

	.btn view {
		width: 160rpx;
		height: 56rpx;
		margin-left: 32rpx;
		border-radius: 8rpx;
	}

	.removeBtn {
		border: 2rpx solid #E4E4E4;
		color: #666;
	}

	.lookWl {
		border: 2rpx solid var(--themeColor);
		color: var(--themeColor);
	}

	.payBtn {
		background: var(--themeColor);
		border: 2rpx solid var(--themeColor);
		color: #fff;
	}

	.order_goods_encrypt {
		height: 120rpx;
		background: linear-gradient(270deg, #ffffff 0%, #f5f5f5 100%);
		border-radius: 8rpx;
	}

	.order_goods {
		background: #fafcff;
		border-radius: 8rpx;
	}

	.order_tag10 {
		background: var(--themeColor);
		color: #fff;
	}

	.price-text {
		color: #ff0000;
	}

	.zpaging {
		padding-top: 100rpx;
	}

	.shopCon {
		padding: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		margin-bottom: 40rpx;
	}

	.shopItem {
		margin-bottom: 10rpx;
	}

	.shopItemTop {
		display: flex;
		justify-content: space-between;
	}
</style>